<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
</head>
<style>
    *{
        user-select: none;
        border-radius: 0;
    }
</style>
<body>
<!-- v-on绑定一些DOM事件，并在出发时运行相应JS代码 -->
<div id="example1">
    <button v-on:click='counter += 1'>加1</button>
    <div>这个按钮被点击了{{ counter }}次</div>
</div>
<hr>

<!-- v-on 还可以接收一个需要调用的方法名称 -->
<div id="example2">
    <button v-on:click="greet">greet</button>
</div>
</body>
<script src="../vue.js"></script>
<script>
    // 直接在标签中写方法
const example1 = new Vue({
    el:"#example1",
    data:{
        counter:0
    }
})

    // click事件调用一个方法
const example2 = new Vue({
    el:"#example2",
    data:{
        name:" 龙象之力黄蛮儿"
    },
    methods:{
        greet: function(event) {
            // this在方法里指向当前vue实例
            alert('hellow' + this.name + '!')

            // event是原生DOM事件
            if(event){
                alert(event.target.tagName)
            }
        }
    }
})
</script>
</html>